<template>
	<!-- 品质门店boutiquestore -->
	<view class="shop_list" id="content">
		<view class="s_list">
			<view class="s_l_item" v-for="item in list" :key="item.uid" @click="$navTo('./shopgoods?id='+item.uid)">
				<image :src="item.logo" ></image>
				<view class="s_l_conent">
					<view class="s_l_title">
						<view class="s_l_name">{{item.supname}}</view>
						<view class="s_l_incon"><text class="yticon icon-icon-test"></text> {{item.distance}}</view>
					</view>
					<view class="s_l_address">
						{{item.supaddress}}
					</view>
				</view>
			</view>
		</view>

		<w-picker :visible.sync="isindustry" mode="selector" :options="dataIndustry"
			@confirm="onConfirm($event,'industry')" :value="industryValue"></w-picker>

		<w-picker :visible.sync="regionVisible" :hideArea="true" mode="region" default-type="value" :hide-area="false"
			@confirm="onConfirm($event,'region')"></w-picker>

		<view class="loading_message">
			<image v-if="isloading" src="/static/business/loading.gif" ></image>
			<text v-if="isempty">到底了~</text>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue"
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				isindustry: false,
				industrytitle: '行业',
				industryValue: '酒水饮料',
				dataIndustry: [{
					label: "全部",
					value: '0',
				}, {
					label: "酒水饮料",
					value: "2",
				}],

				regionVisible: false,

				navTitletActive: 1,
				
				x: '',
				y: '',
				list: [],
				isempty: false,
				isloading: false,
			}
		},
		mounted() {
			let that=this;
			uni.showLoading({
				title:'加载中'
			})
			uni.getLocation({
				type: 'gcj02',
				success(v) {
					that.x=v.longitude;
					that.y=v.latitude;
					that.getlist();
				},
				fail(err) {
					that.$api.msg('位置获取失败，请重试')
					that.getlist();
				},
				complete() {
					uni.hideLoading();
				}
			})
		},
		methods: {
			getlist() {
				this.isloading=true;
				this.$axios('o2o/gradeMerch','POST','shop').then(res=>{
					this.isloading=false;
					if(res.data.code==200){
						let length=res.data.data.length;
						this.list=this.list.concat(res.data.data);
						this.isempty=length<=0?true:false;
					}
				})
			},
			onConfirm(e, type) {
				if (type == 'industry') {
					this.industrytitle = e.result;
					this.industryValue = e.result;
				}
			},
		},
	}
</script>

<style lang='scss'>
	@import "/store/icon.css";

	page {
		background: #F6F6F6;
	}

	.shop_list {
		color: $font-color-dark;
		padding-top: var(--status-bar-height);
	}


	

	.s_list {
		padding: 20upx 20upx 0;
		overflow: hidden;
	}

	.s_l_item {
		background: #ffffff;
		border-radius: 20upx;
		display: flex;
		margin-bottom: 20upx;
		padding: 20upx;
	}

	.s_l_item image {
		border-radius: 15upx;
		height: 170upx;
		width: 170upx;
	}

	.s_l_conent {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 30upx;
	}

	.s_l_title {
		display: flex;
		align-items: center;
		height: 40upx;
		width: 100%;
		position: relative;
	}

	.s_l_name {
		color: $font-color-dark;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 320upx;
	}

	.s_l_incon {
		color: #6EA7FA;
		position: absolute;
		top: -20upx;
		right: 0;
	}

	.s_l_address {
		color: $font-color-base;
		line-height: 40upx;
		max-height: 130upx;
		padding-top: 10upx;
		overflow: hidden;
	}

	.loading_message {
		color: #0062CC;
		padding: 20upx;
		text-align: center;
	}

	.loading_message image {
		height: 50upx;
		width: 50upx;
	}
</style>
